<template lang="pug">
div
    .main-index(v-if="$route.path === '/childCare/growthObserve/publish'")
     el-row(:gutter="20")
      el-col(:span="12" v-for="(item, index) in [1, 2, 3,4]" :key="index")
       .content-s.mb20
         .state-left
          .img-t
           a-image(:url="url")
         .state-right
          .right-content
            .teacher-name.flex.justify-sb
             div
              span.fwb 李星光
              span.fwb 老师
             div
              el-popover(
                width="50px"
              )
               p.handel-c 屏蔽
               p.handel-c 删除
               i(class="el-icon-more" slot="reference")

            .student-name.mt20
              span.fwb 学生：
              span 张三
          .flex.wrap
           BadayStatus(:url="url" v-for="(item, index) in [1, 2, 3, 5]" :key="index")
          .mt20
            .like-portrait
              a-image(:url="url")
          .mt20.comment
             .color-l 全部989条评价
             .comment-list
               span.color-l 李老师：
               span 宝宝非常棒棒哒！
     .tr
      i-pagination(
          v-bind="pagination"
          activeClass="active"
          @pagination="values => getList({ ...values, ...filterData })"
        )

</template>
<script>
// import { mapGetters } from 'vuex'
import AImage from '@/components/Basic/Image'

import IPagination from '@/components/Basic/Pagination'
import BadayStatus from './components/badayStatus'
// import Item from './components/item'
// import MyDrawer from './components/myDrawer'

export default {
  components: {
    IPagination,
    AImage,
    BadayStatus
    // AddDrawer,
    // Item,
    // MyDrawer
  },
  data () {
    return {
      url: 'https://saas.res.dotflat.cn/teach/file/system/2022-01/2022-01-08_21-10-05-817.webp',
      publishObj: {
        url: '',
        checkList: [],
        studentArr: ['詹三', '李淑', '曹仁']
      },
      pagination: {
        pageNum: 0,
        pageSize: 4,
        total: 1
      }
    }
  },
  computed: {

  },
  watch: {
    'recordObj.checkList' (val) {
      console.log(val)
    }
  },
  created () {

  },
  methods: {
    getList () {}
  }
}
</script>
<style lang="scss" scoped>
.main-index {
  font-size: 16px;
  .content-s {
    display: flex;
    width: 100%;
  .img-t {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
    .state-right {
      margin-left: 20px;
      margin-top: 30px;
      width: 100%;
      .el-icon-more {
        font-size: 26px;
      }
      .fwb {
        font-size: 18px;
        font-weight: bold;
      }
    }
    .like-portrait {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
    .comment {
      font-size: 14px;
      .color-l {
          color: #999
      }
    }

  }
}
.handel-c {
  text-align: center;
  padding: 5px 0;
  cursor: pointer;
  &:hover {
    color: #AACD22;
  }
}

</style>
